<template>
  <div class="method-info">
    <el-form label-width="80px" label-position="right" class="method-info">
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item label="模板名称">
            <el-input v-model="template.templateName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="模板标签">
            <el-input v-model="template.templateLabel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据存储">
            <el-select style="width: 100%" v-model="template.callDb">
              <template v-for="option in appContext.envs">
                <el-option v-if="option.envType === 'db'" :key="option.envProp" :value="option.envProp" :label="option.envLabel"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件存储">
            <el-select style="width: 100%" v-model="template.callStore">
              <template v-for="option in appContext.envs">
                <el-option v-if="option.envType === 'store'" :key="option.envProp" :value="option.envProp" :label="option.envLabel"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资源名称">
            <el-input v-model="template.nameFormat"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实体值">
            <el-input v-model="template.entityFormat"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分组属性">
            <el-input v-model="template.groupProp"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label-width="0" style="text-align: center">
        <el-button type="primary" :loading="loading" icon="el-icon-check" @click="saveTemplate">{{ template.templateId ? '更新' : '保存' }}</el-button>
        <el-button :disabled="activeName !== 'demo'" type="success" :loading="loading" icon="el-icon-video-play" @click="testTemplate">测试</el-button>
        <el-button :disabled="activeName !== 'demo'" type="warning" :loading="loading" icon="el-icon-video-play" @click="loadSource">JSON</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName">
      <el-tab-pane label="业务模型" name="model">
        <report-model :template-id="template.templateId"/>
      </el-tab-pane>
      <el-tab-pane label="报告插件" name="plugin" lazy>
        <report-plugin :template-id="template.templateId" />
      </el-tab-pane>
      <el-tab-pane label="数据源处理" name="script" lazy>
        <idea-code v-model="template.sourceScript" :config="{ language: 'java' }" style="height: calc(100vh - 390px)"></idea-code>
      </el-tab-pane>
      <el-tab-pane label="测试参数" name="demo">
        <idea-code ref="argRef" v-model="template.demoSource" :config="{ language: 'json' }" style="height: calc(100vh - 390px)"></idea-code>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import IdeaCode from "@/components/idea-code/IdeaCode";
import ReportPlugin from "@/views/system/report/ReportPlugin";
import ReportModel from "@/views/system/report/ReportModel";
import LabReport from "@/mixins/LabReport";
export default {
  name: "TemplateInfo",
  components: {ReportModel, ReportPlugin, IdeaCode},
  mixins: [LabReport],
  inject: {
    appContext: {
      from: 'appContext',
      default: function () {
        return {}
      }
    }
  },
  props: {
    template: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data(){
    return {
      loading: false,
      activeName: 'model'
    }
  },
  methods: {
    saveTemplate() {
      const body = this.$Util.copy(this.template)
      body.demoSource = this.$Util.toJsonStr(this.template.demoSource)
      this.$post('/reportTemplate/save?appId=' + this.appInfo.appId, body)
      .then(res => {
        this.$resultMsg(this, res)
      })
    },
    testTemplate() {
      const body = {
        templateId: this.template.templateId,
        args: this.template.demoSource,
        suffix: this.template.demoSource.suffix || 'pdf',
        saveFlag: this.template.demoSource.saveFlag || false,
        configIds: this.template.demoSource.configIds || [],
      }
      this.createReport(body)
    },
    loadSource() {
      const accessToken = this.$AuthStorage.getAccessToken()
      let url = this.$Util.mergeUrl(process.env.VUE_APP_BASE_API, `/appInfo/loadJsonSource/${this.template.templateId}?access_token=${accessToken}`)
      // const args = $this.$Util.toObject(this.$refs.argRef.value)
      const keys =  Object.keys(this.template.demoSource)
      if (keys && keys.length > 0) {
        keys.forEach(key => {
          url += `&${key}=${this.template.demoSource[key]}`
        })
      }
      url += `&appId=${this.appInfo.appId}`
      window.open(url)
    }
  }
}
</script>

<style scoped>

</style>
